<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form ref="form" label-width="120px"  @submit.native.prevent :inline="true"    >
          <el-form-item label="请扫描" label-width="150px">
            <el-input   ref="txtScan" v-model="txtScan" placeholder="记账单号" @keyup.native.enter="doScan"  ></el-input>
          </el-form-item>
          <el-form-item  label-width="5px">
            <small>记账单存在将直接打开编辑界面</small>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <span >
          <strong>已选金额</strong>
          <span class="span-num">{{amountSum}}</span>
        </span>
      </el-col>
    </el-row>

    <data-view
      ref="financeBill"
      propViewKey="finance_bill"
      :propFlowKey="propFlowKey"
      propViewForm="finance/bill/detail.vue"
      :propSubHeight="60"
      @checkbox-change="checkboxAllChange"
      @checkbox-all="checkboxAllChange"
      @after-load="checkboxAllChange"
      @extra-button-click="extraButtonClick"
      :propIsTdesign="true"
    />
  </div>
</template>

<script>
import utilBill from './utilBill.js'

export default {
  name: 'settlement',
  remark: '消耗清单',
  data() {
    return {
      txtScan: '',
      amountSum: 0
    }
  },
  components: {

  },
  methods: {
    //扫码单号
    doScan() {
      this.txtScan = this.strings.trimrl(this.txtScan)
      if (this.strings.isBlank(this.txtScan)) {
        this.$refs.txtScan.focus()
        this.utilMessage.warning('请扫描业务单号')
        return null
      }
      this.utilVue.loadShow(true)
      this.$ajax.get('/finance/bill/findBy?key=bus_key&value=' + this.txtScan).then(resp => {
        if (resp.success && resp.data) {
          this.$refs.financeBill.viewRowOne(resp.data.id)
        }
        this.utilVue.loadHide()
        this.txtScan = ''
      })
    },

    //复选按钮
    checkboxAllChange() {
      this.amountSum = 0
      let rows = this.$refs.financeBill.$refs.tbMain.getCheckboxRecords()
      if (rows) {
        rows.forEach(row => {
          this.amountSum  = this.utilNum.numAdd(row.amount, this.amountSum)
        })
      }
    },

    //扩展按钮
    extraButtonClick(para) {
      let buttonKey = para.button.key
      // eslint-disable-next-line default-case
      switch (buttonKey) {
      case 'printBatch': //打印消耗清单
        utilBill.printBatch(para.data, this)
        break
      }
    }
  },
  props: ['propFlowKey'],
}
</script>

<style lang="scss" scoped>
  .span-num{
    width: 100px;
    display: inline-block;
    padding-left: 5px;
    text-align: left;
  }
</style>
